<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>nav导航切页</title>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            font-size: 16px;
            color: #666;
        }

        .nav {
            display: flex;
            margin: 0;
            padding: 0;
        }

        .nav li {
            display: inline-block;
            list-style: none;
            line-height: 40px;
            font-size: 20px;
            color: #666;
        }

        .nav li a {
            display: block;
            padding: 5px 10px;
            text-decoration: none;
        }

        .nav li a.active {
            color: #FFF;
            background-color: deepskyblue;
        }

        .btn {
            display: inline-block;
            padding: 5px 10px;
            min-width: 50px;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            background-color: #Fafafa;
            color: #666;
            text-align: center;
            cursor: pointer;
            margin: 0 10px;
        }

        .btn-add {
            background-color: #2476ff;
            ;
            color: #FFF;
        }

        .btn-delete {
            background-color: chocolate;
            color: #FFF;
        }

        .btn-edit {
            background-color: #ffb342;
            ;
            color: #FFF;
        }

        .btn-update {
            background-color: #1bffa1;
            ;
            color: #FFF;
        }
    </style>
    <!-- 库 -->
    <script src="../libs/js/axios.min.js"></script>
    <script src="../libs/js/mock.js"></script>
    <!-- <script src="../libs/js/react-router.js"></script> -->

    <script src="../libs/js/react.production.min.js"></script>
    <script src="../libs/js/react-dom.production.min.js"></script>
    <script src="../libs/js/babel.min.js"></script>
    <script src="../libs/js/react-router-dom.js"></script>
    <script src="../libs/js/react-redux.js"></script>
    <script src="../libs/js/redux.js"></script>

    <script type="text/babel" src="./js/basic-knowledge.js"></script>
    <script type="text/babel" src="./store/index.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
        // console.log(ReactRouterDOM);
        // const { Router, Route, Link, browserHistory } = ReactRouter;
        const { HashRouter, BrowserRouter, Switch, Route, Link, useHistory, useLocation, Redirect, NavLink } = ReactRouterDOM;
        // 使用 ES6 的转译器，如 babel
        //   import React from "react";
        //   import { Router, Route, Link } from "react-router";
        // const { Provider, connect} = ReactRedux

        class App extends React.Component {
            constructor(props) {
                super(props)
                console.log("props:", props)
            }
            render() {
                return (
                    <div id="app">
                        <HashRouter>
                            <nav>
                                <ul className="nav">
                                    <li>
                                        <NavLink exact to="/" activeClassName="active">基础概念</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to="/about" activeClassName="active">About</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to="/box" activeClassName="active">inbox</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to="/message" activeClassName="active">高阶组件</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to="/error-boundary" activeClassName="active">错误边界处理</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to="/redux" activeClassName="active">redux</NavLink>
                                    </li>
                                </ul>
                            </nav>
                            <h3 className="counter">{this.props.count}</h3>
                            {/* A <Switch> looks through its children <Route>s andrenders the first one that matches the current URL. */}
                            <Switch>
                                <Route exact path="/" component={Home}></Route>
                                <Route exact strict path="/about" component={About}></Route>
                                <Route exact strict path="/box" component={Inbox}></Route>
                                <Route exact strict path="/message" component={Message}></Route>
                                <Route exact strict path="/error-boundary" component={ErrorBoundary}></Route>
                                <Route exact strict path="/redux" component={ReduxComponent}></Route>
                                <Route render={() => <div className="no-found">404</div>} />
                            </Switch>
                        </HashRouter>
                    </div>
                );
            }
        }

        /**
         * redux读取redux变化
         */
        store.subscribe(() => {
            console.log("读取state:", store.getState())
            ReactDOM.render(<App />, document.body);
        })


    </script>
</body>

</html>